<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改入库单据查询')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .supplierInput {
            width: 100%;
            height: 34px;
            border: 1px solid #e5e6e7;
            padding: 6px 12px;
        }
        .supplierInput:focus {
            outline: none;
            border: 1px solid #1bb394;
        }
        .ul_ {
            position: absolute;
            right: 12px;
            width: calc(calc(100% - 27px));
            height: 200px;
            z-index: 999999;
            background-color: #fff;
            overflow: auto;
            border: 1px solid #dddddd;
        }
        .ul_ li {
            cursor: pointer;
            width: 100%;
            text-indent: 12px;
        }
        .ul_ li:hover {
            background: #1e90ff;
            color: #ffffff;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-billInMaster-edit" th:object="${byId}">
        <input id="billId" name="billId" type="hidden" th:field="*{billId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">SAP交货单号：</label>
            <div class="col-sm-8">
                <input id="billNo" name="billNo" th:field="*{billNo}" class="form-control" type="text" readonly="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">入库类型：</label>
            <div class="col-sm-8">
                <select id="type" name="type" class="form-control" v-model="checkType" required>
                    <option value="1">采购单入库</option>
                    <option value="2">回流入库</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">单据状态：</label>
            <div class="col-sm-8">
                <select id="state" name="state" class="form-control" v-model="checkState" required>
                    <option value="1">待入库</option>
                    <option value="2">部分入库</option>
                    <option value="3">入库完成</option>
                    <option value="4">过账完成</option>
                    <option value="5">过账上传中</option>
                    <option value="6">过账失败</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">供应商名称：</label>
            <div class="col-sm-8" style="position: relative">
                <input type="text" class="supplierInput" v-model="inputSupplierName" @focus="focusSupplier()" @blur="supplierInputYZ()"/>
                <ul id="ul_supplier" class="ul_" v-show="showSupplierUl">
                    <li v-for="(item, index) in supplierList" :key="index" @click="chooseSupplier(item.supplierName, item.supplierCode)" v-cloak>{{item.supplierName}}</li>
                </ul>
                <input id="supplierCode" name="supplierCode" type="hidden" v-model="inputSupplierCode">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input id="memo" name="memo" th:field="*{memo}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">制单人：</label>
            <div class="col-sm-8">
                <input id="createUserName" name="createUserName" th:field="*{createUserName}" class="form-control" type="text" required>
            </div>
        </div>
    </form>
    <form th:object="${byId}">
        <input id="checkType" type="hidden" th:field="*{type}"/>
        <input id="checkState" type="hidden" th:field="*{state}"/>
        <input id="checkSupplierCode" type="hidden" th:field="*{supplierCode}">
        <input id="checkSupplierName" type="hidden" th:field="*{supplierName}">
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "in/billInMaster";

    function submitHandler(){
        if(app.inputSupplierName == ''){
            $.modal.alertError("请选择供应商！！");
            return;
        }else{
            if($.validate.form()){
                $.operate.save(prefix + "/edit", $('#form-billInMaster-edit').serialize());
            }
        }
    }

    var app = new Vue({
        el: '.wrapper',
        data: {
            checkType: '',
            checkState: '',
            suppliers: [],
            inputSupplierName: '',
            inputSupplierCode: '',
            showSupplierUl: false,
            supplierList: []
        },
        methods: {
            //函数防抖
            supplier_debounce(wait){
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.getSelectSupplierData(this.inputSupplierName.trim());
                }, wait)
            },
            //已选供应商
            chooseSupplier(val, code){
                this.inputSupplierName = val;
                this.inputSupplierCode = code;
            },
            //重置输入供应商
            supplierReset(){
                this.inputSupplierName = '';
                this.inputSupplierCode = '';
            },
            //验证输入供应商
            supplierInputYZ(){
                if(this.inputSupplierName.trim() != ''){
                    var arr = [];
                    for(var i = 0; i < this.suppliers.length; i++){
                        arr.push(this.suppliers[i].supplierName);
                    }
                    var index = $.inArray(this.inputSupplierName.trim(), arr);
                    if(index < 0){
                        $.modal.alertError("不存在该供应商");
                        this.supplierReset();
                    }
                }else{
                    this.supplierReset();
                }
            },
            //供应商输入框聚焦
            focusSupplier(){
                if(document.getElementsByClassName('supplierInput')[0] == document.activeElement){
                    this.showSupplierUl = true;
                    this.supplier_debounce(500);
                }
            },
            //根据供应商输入框内容匹配供应商列表
            getSelectSupplierData(val){
                this.supplierList = [];
                for(var i = 0; i < this.suppliers.length; i++){
                    if(this.suppliers[i].supplierName.indexOf(val) != -1){
                        this.supplierList.push(this.suppliers[i]);
                    }
                }
            },
            //获取供应商列表
            getSuppliers: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/supplier/list",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.suppliers = data.rows;
                    }
                });
            }
        },
        created(){
            this.getSuppliers();
            this.checkType = document.getElementById('checkType').value;
            this.checkState = document.getElementById('checkState').value;
            this.inputSupplierName = document.getElementById('checkSupplierName').value;
            this.inputSupplierCode = document.getElementById('checkSupplierCode').value;
        },
        watch: {
            'inputSupplierName': {
                handler: function(){
                    this.focusSupplier();
                }
            }
        },
        mounted(){
            let that = this;
            document.addEventListener('click', function(e){
                if(e.target.className != 'supplierInput'){
                    that.$nextTick(() => {
                        that.showSupplierUl = false;
                    })
                }
            })
            document.getElementById('ul_supplier').onmousedown = function(e){
                if(e && e.preventDefault){
                    e.preventDefault();
                }else{
                    window.event.returnValue = false;
                }
                return false;
            }
        }
    })
</script>
</body>
</html>
